<template>
  <div class="">
    <public-dialog width="50%" dialogCenter :title="titleName" :visible="visible" @update:visible="onVisibleChange"
      @onConfirm="confirmHandler">
      <el-form :model="formInline" label-width="140" ref="formRef" @submit.native.prevent :rules="formRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联项目名称" prop="projectId">
              <el-select v-model="formInline.projectId" placeholder="请选择关联项目名称" clearable style="width: 100%;" filterable>
                <el-option v-for="item in optionObj.projectOptions" :label="item.projectName" :value="item.projectId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectSummaryName">
              <el-input v-model="formInline.projectSummaryName" placeholder="请输入项目名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类别" prop="projectNature">
              <el-select v-model="formInline.projectNature" placeholder="请选择项目类别" clearable style="width: 100%;">
                <el-option v-for="item in optionObj.typeList" :label="item.typeName" :value="item.projectTypeId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业类型" prop="industryTypeId">
              <el-select v-model="formInline.industryTypeId" placeholder="请选择行业类型" clearable style="width: 100%;">
                <el-option v-for="item in optionObj.industryOptions" :label="item.enumName" :value="item.enumId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实施主体" prop="companyId">
              <el-select v-model="formInline.companyId" placeholder="请选择实施主体" clearable style="width: 100%;">
                <el-option v-for="item in optionObj.companyOptions" :label="item.companyName" :value="item.companyId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投资金额" prop="investAmount">
              <el-input v-model="formInline.investAmount" placeholder="请输入投资金额" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度" prop="year">
              <el-input v-model="formInline.year" placeholder="请输入年度" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度拟投资金额" prop="yearAmount">
              <el-input v-model="formInline.yearAmount" placeholder="请输入年度拟投资金额" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投资预估收益" prop="estimateProfit">
              <el-input v-model="formInline.estimateProfit" placeholder="请输入投资预估收益" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实施年限" prop="periods">
              <el-input v-model="formInline.periods" placeholder="请输入实施年限" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目基本情况" prop="projectContent">
              <el-input v-model="formInline.projectContent" placeholder="请输入项目基本情况" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </public-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import PublicDialog from "@/components/PublicDialog.vue";
import { ElForm, ElFormItem, ElRow, ElCol, ElInput, ElSelect, ElOption, ElNotification, ElLoading } from "element-plus";
import { otherApi, consoleApi, investSummaryApi } from "@/api/investment.js";

let titleName = ref("");
let visible = ref(false);
let formInline = reactive({
  projectId: "",
  projectSummaryName: "",
  projectNature: "",
  industryTypeId: "",
  companyId: "",
  investAmount: "",
  year: "",
  yearAmount: "",
  estimateProfit: "",
  periods: "",
  projectContent: "",
});
let optionObj = reactive({
  projectOptions: [],
  typeList: [
    {
      typeName: "新设立",
      projectTypeId: 3
    },
    {
      typeName: "续投",
      projectTypeId: 4
    }
  ],
  industryOptions: [],
  companyOptions: [],
});
let formRules = reactive({
  projectSummaryName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
  projectNature: [{ required: true, message: "请选择项目类别", trigger: "blur" }],
  industryTypeId: [{ required: true, message: "请选择行业类型", trigger: "blur" }],
  companyId: [{ required: true, message: "请选择实施主体", trigger: "blur" }],
  investAmount: [{ required: true, message: "请输入投资金额", trigger: "blur" }],
  year: [{ required: true, message: "请输入年度", trigger: "blur" }],
  yearAmount: [{ required: true, message: "请输入年度拟投资金额", trigger: "blur" }],
  estimateProfit: [{ required: true, message: "请输入投资预估收益", trigger: "blur" }],
  periods: [{ required: true, message: "请输入实施年限", trigger: "blur" }],
});
let formRef = ref(null);

let onVisibleChange = (sign) => {
  if (!sign) {
    for (let key in formInline) {
      if (key === "summaryId") {
        delete formInline["summaryId"]
      }
    }
    formRef.value.resetFields();
  }
  visible.value = sign;
};

// 获取关联项目
let getProjectList = async () => {
  let res = await consoleApi.projectInvestment({});
  optionObj.projectOptions = res.data || [];
};

// 获取行业类型
let getIndustryType = async () => {
  let res = await otherApi.getListEnum({ type: 2 });
  optionObj.industryOptions = res.data || [];
};

// 获取实施主体
let getCompanyType = async () => {
  let res = await otherApi.getCompanyList({});
  optionObj.companyOptions = res.data || [];
};

let openHandler = (param) => {
  titleName.value = param.title;
  nextTick(() => {
    if (param.row) {
      for (let key in formInline) {
        formInline[key] = param.row[key] || "";
      }
      formInline["summaryId"] = param.row.summaryId;
    }
    formInline["type"] = param.type;
  });
  getProjectList();
  getIndustryType();
  getCompanyType();
  visible.value = true;
};

let emits = defineEmits(["submitSuccess"])
let confirmHandler = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let loadingInstance = ElLoading.service({
        lock: true,
        text: "保存中..."
      });
      try {
        let res = await investSummaryApi.editList(formInline);
        loadingInstance.close();
        if (res.code === "200") {
          visible.value = false;
          ElNotification.success(`${titleName.value}成功！`);
          emits("submitSuccess");
        }
      } catch (error) {
        console.log(error);
        loadingInstance.close();
      }
    }
  })
};

defineExpose({
  openHandler
});
</script>

<style lang="scss" scoped>
:deep(.el-date-editor) {
  height: 100%;

  .el-input__wrapper {
    height: 100%;
  }
}
</style>
